.active {
  background: #e5f6fe;
}

.listRow {
  cursor: pointer;
}

.ant-advanced-search-form {
  padding: 16px 8px;
  background: #f8f8f8;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

/* because the label length is letiable, you may need to adjust the left edge to have the form centered */

.ant-advanced-search-form > .ant-row {
  position: relative;
  left: -6px;
}

.ant-advanced-search-form .ant-btn + .ant-btn {
  margin-left: 8px;
}

.category {
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
  padding: 15px;
  height: 104px;

}

.hidden {
  display: none
}

.createFormTopYellow {
  background-color: #fa0;
  height: 1px;
  width: 100%
}

.createFormTopBlue {
  background-color: #2db7f5;
  height: 1px !important;
  width: 100%
}

.loading {
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
}


.detailWrapper {
  //display: -moz-box;  /* Firefox */
  //display: -ms-flexbox;    /* IE10 */
  //display: -webkit-box;    /* Safari */
  //display: -webkit-flex;    /* Chrome, WebKit */
  //display: box;
  //display: flex;
  position: relative;
}

.box {
  position: relative;
}

@keyframes detailRight {
  from {
    transform: translateX(-240px)
  }
  to {
    transform: translateX(0)
  }
}

@keyframes detailLeft {
  from {
    transform: translateX(240px)
  }
  to {
    transform: translateX(0)
  }
}

@keyframes listRight {
  from {
    transform: translateX(-240px)
  }
  to {
    transform: translateX(0)
  }
}

@keyframes listLeft {
  from {
    transform: translateX(0)
  }
  to {
    transform: translateX(-240px)
  }
}

.listClass {
  display: inline-block;
  box-sizing: border-box;
  padding: 20px 10px 0 0;
  position: absolute;
  //width: 240px;
  width: 30%;
  // flex: 2
}

.hide {
  display: none;
}

.detailClass {
  box-sizing: border-box;
  position: relative;
  //margin-left: 240px;
  margin-left: 30%;
}

.detailListClass {
  box-sizing: border-box;
  position: relative;
}

// .detailRight {
//   animation: detailRight .5s;
// }

// .detailLeft {
//   animation: detailLeft .5s;
// }

// .listRight {
//   animation: listRight .5s;
// }

// .listLeft {
//   animation: listLeft .5s;
//   position: absolute;
//   z-index: 1;
// }

.switchBtn {
  width: 15px;
  height: 50px;
  background: #ec5853;
  color: #fff;
  position: absolute;
  margin-left: -15px;
  border: none;
  top: 20px;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border-radius: 3px;
  z-index: 2;

  &:active {
    background: #41b212;
  }
}





